<template>
  <div ref="container" style="width: 240px; height: 150px;margin: 0 auto;"></div>
</template>

<script setup lang="ts">
import { Radar } from '@antv/g2plot';
import { onMounted, ref, useTemplateRef, watch } from 'vue';

const props = defineProps({
  data: Object
})

const cont = useTemplateRef('container')
let radarPlot = null;

onMounted(() => {
  radarPlot = new Radar(cont.value, {
    data: props.data,
    xField: 'name',
    yField: 'star',
    appendPadding: [0, 10, 0, 10],
    meta: {
      star: {
        alias: '风险值',
        min: 0,
        nice: true,
        formatter: (v) => Number(v).toFixed(2),
      },
    },
    xAxis: {
      tickLine: null,
    },
    yAxis: {
      label: false,
      grid: {
        alternateColor: 'rgba(0, 0, 0, 0.14)',
      },
    },
    // 开启辅助点
    point: {
      size: 2,
    },
    area: {},
  });
  radarPlot.render();
})
watch(() => props.data, () => {
  radarPlot.changeData(props.data);
})
</script>
